<template>
  <div class="m-login">
    <!-- 标题头部 -->
    <div class="login-header">
      <div class="fl logo"><img src="../assets/icon-bg.png" /></div>
      <div class="logo-detail"><span>商家中心</span><span class="icon">|</span><span>MerChant Center</span></div>
    </div>
    <!-- 登录框主体 -->
    <div class="login-body">
      <div class="login-content">
        <w-form-validate class="main-login">
          <h3 class="title">登录</h3>
          <div class="input-box clearfix phone">
            <span class="fl icon">
              <img src="../assets/icon-mobile.png" />
            </span>
            <w-input class="fl input-phone" :border="false" type="text" holder="请输入手机号码" :validate="false" v-model="params.userName"></w-input>
          </div>
          <div class="input-box clearfix password">
            <span class="fl icon">
              <img src="../assets/icon-password.png" />
            </span>
            <w-input class="fl input-password" :maxlength="16" :border="false" :validate="false" type="password" v-model="params.password" holder="请输入密码"></w-input>
          </div>
          <!--找回密码  -->
          <div class="fr forget">
            <router-link to="./forget" class="text-c">忘记密码</router-link>
          </div>
          <div class="m-btn" @click="goLogin">
            <button class="btn">登录</button>
          </div>
          <!-- 隐藏输入框 -->
          <div class="hidden">
            <input type="text" name="userName">
            <input type="password" name="password">
          </div>
        </w-form-validate>
      </div>
    </div>
  </div>
</template>

<script>
  import { apiLogin } from '../common/api.js'
  import rule from '../components/Input/rule.js'
  import app from '../main'
  // 获取session
  import { storage } from '../common/util'

  export default {
    data() {
      return {
        errorMessage: '',
        params: {
          userName: (storage.get('hxd-login-username') || ''),
          password: '',
          deviceType: 'PC',
          deviceNo: returnCitySN['cip']
        }
      }
    },
    methods: {
      // 登录
      goLogin() {
        // 密码
        let password = this.params.password

        // 手机号输入不正确
        if (rule.isMobile(this.params.userName, '亲，请输入正确的手机号码')) {
          app.$toast('亲，请输入正确的手机号码')
          return
        }

        // 将密码采用md5加密
        // this.params.password = md5(this.params.password)
        const params = {
          userName: this.params.userName,
          password: md5(this.params.password),
          deviceType: 'PC',
          deviceNo: this.params.deviceNo
        }

        // 请求登录接口
        apiLogin(params).then((data) => {
          if (data == '313') return
          app.$toast('登录成功，正在跳转到首页')
          // 1s后跳转到登录页面
          setTimeout(() => {
            // 将用户名保存到缓存中
            storage.set('hxd-login-username', this.params.userName)

            // 将值放到store中
            this.$store.commit('updateUserInfo', data)

            // 跳转到首页
            this.$router.push('/')
          }, 1000)
        })
        // 将密码设置为md5加密之前的（防止登录不成功之后又点击了登录，密码被多次加密）
        // this.params.password = password
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import '../scss/_var.scss';

  .hidden {
    display: none;
  }

  .m-login {
    position: relative;
    height: 100%;
    min-height: 550px;

    .icon {
      margin-top: 4px;
    }

    .error {
      color: #a94442;
      font-size: 14px;
      font-weight: 500;
    }

    input:-moz-placeholder {
      font-size: 16px;
      color: $color-gray;
    }

    .login-header {
      background-color: #FFFFFF;
      padding: 34px 0 34px 120px;
      width: 100%;

      .logo {
        display: inline-block;
      }

      .logo-detail {
        display: inline-block;
        margin-left: 30px;
        font-size: 24px;
        span {
          vertical-align: sub;
          &.icon {
            margin: 0 20px;
          }
        }
      }
    }

    .login-body {
      background: url('../assets/bg.png') no-repeat;
      background-size: cover;
      height: calc(100% - 102px);

      .form-control {
        border: none;
        background: none;
      }

      // 登录框主体
      .login-content {
        position: relative;
        width: 1000px;
        margin: 0 auto;
        height: 100%;

        .main-login {
          background-color: $color-white;
          border-radius: 10px;
          width: 400px;
          height: 418px;
          padding: 54px 40px 58px;
          position: absolute;
          right: 0px;
          top: calc(50% - 210px);

          .title {
            font-size: 20px;
            color: $color-gray;
          }

          .input-box {
            width: 100%;
            background-color: #fafafa;
            border-radius: 5px;
            &.phone {
              margin: 20px auto 40px;
              padding: 8px 32px;
              .input-phone {
                width: 230px;
              }
            }

            &.password {
              padding: 8px 32px;
              .input-password {
                width: 230px;
              }
            }
          }

          .forget {
            margin-top: 8px;
            .text-c {
              color: $color-gray;
            }
          }
          .m-btn {
            margin-top: 90px;
            .btn {
              width: 100%;
              height: 50px;
              font-size: 20px;
              background-color: $color-pink;
              color: $color-white;
            }
          }
        }
      }
    }
  }
</style>